<template>
  <div class="z-calendar">
    <my-tabs :tab-list="tabList"></my-tabs>
    <div class="z-calendar-header">
      <div class="z-calendar__header-top">
        <el-input v-model="title" placeholder="输入直播课名称" size="mini"></el-input>
        <el-button plain size="mini" @click="onSearch">筛选</el-button>
      </div>
      <div class="z-calendar__header-bottom">
        <div class="z-calendar__button-group">
          <el-button-group>
            <el-button
              v-for="(item, index) in btnList"
              :key="index"
              :type="btnType == item.key ? 'primary' : ''"
              size="mini"
              @click="selectTable(item.key)"
              >{{ item.value }}</el-button
            >
          </el-button-group>
        </div>
        <div class="z-calendar__button">
          <el-button
            plain
            size="mini"
            icon="el-icon-arrow-left"
            @click="selectDate('prev')"
          ></el-button>
          <div class="z-calendar__title">
            <template v-if="btnType == 'week'">
              {{ curWeekDatePrefix }}
            </template>
            <template v-else-if="btnType == 'month'">
              {{ curMonthDatePrefix }}
            </template>
            <template v-else>
              {{ curDayDatePrefix }}
            </template>
          </div>
          <el-button
            plain
            size="mini"
            icon="el-icon-arrow-right"
            @click="selectDate('next')"
          ></el-button>
        </div>
        <el-link type="primary" :underline="false" @click="selectDate('today')">{{
          curTodaySuffix
        }}</el-link>
        <div class="z-calendar__num">
          共<span>{{ count }}</span
          >节课
        </div>
      </div>
    </div>
    <div class="z-calendar-body">
      <template v-if="btnType == 'day'">
        <calendar-day
          ref="calendarDay"
          v-model="dayValue"
          :title="title"
          @number="changeNumber"
        ></calendar-day>
      </template>
      <calendar-week
        ref="calendarWeek"
        v-else-if="btnType == 'week'"
        v-model="weekValue"
        :title="title"
        @number="changeNumber"
      ></calendar-week>
      <calendar-month
        ref="calendarMonth"
        v-else
        v-model="monthValue"
        :title="title"
        @number="changeNumber"
      ></calendar-month>
    </div>
  </div>
</template>

<script>
import MyTabs from '../../components/myTab.vue'
import calendarDay from './components/calendar-day.vue'
import calendarWeek from './components/calendar-week.vue'
import calendarMonth from './components/calendar-month.vue'
import { mapGetters } from 'vuex'
import { parseTime } from '@/utils/filters.js'
export default {
  components: {
    MyTabs,
    calendarDay,
    calendarWeek,
    calendarMonth
  },
  data() {
    return {
      tabList: [
        {
          title: '直播课表'
        }
      ],
      btnList: [
        {
          key: 'day',
          value: '日'
        },
        {
          key: 'week',
          value: '周'
        },
        {
          key: 'month',
          value: '月'
        }
      ],
      btnType: 'day',
      dayValue: new Date(),
      weekValue: new Date(),
      monthValue: new Date(),
      title: '',
      count: 0
    }
  },
  computed: {
    ...mapGetters({
      globThemeColor: 'projectSetting/getGlobThemeColor'
    }),
    curTodaySuffix() {
      let index = this.btnList.findIndex(item => item.key == this.btnType)
      let arr = ['今日', '本周', '本月']
      return arr[index]
    },
    curDayDatePrefix() {
      return parseTime(this.dayValue, '{y}年{m}月{d}日')
    },
    curWeekDatePrefix() {
      /**
       * 获取当前周的开始日期
       */
      const getStartDateOfWeek = () => {
        const date = this.toDate(this.weekValue)
        const firstDay = date.getDay()
        let diff = (7 + firstDay) % 7
        date.setDate(date.getDate() - diff)
        return date
      }
      /**
       * 获取当前周的结束日期
       * 星期天为 0
       * 星期一到星期六分别用 1-6 表示
       */
      const getEndDateOfWeek = () => {
        const date = this.toDate(this.weekValue)
        const firstDay = date.getDay()
        let diff = (6 - firstDay) % 7
        date.setDate(date.getDate() + diff)
        return date
      }
      // 年相等不显示
      if (getStartDateOfWeek().getFullYear() == getEndDateOfWeek().getFullYear()) {
        return `${parseTime(getStartDateOfWeek(), '{y}年{m}月{d}日')} - ${parseTime(
          getEndDateOfWeek(),
          '{m}月{d}日'
        )}`
      } else {
        return `${parseTime(getStartDateOfWeek(), '{y}年{m}月{d}日')} - ${parseTime(
          getEndDateOfWeek(),
          '{y}年{m}月{d}日'
        )}`
      }
    },
    curMonthDatePrefix() {
      return parseTime(this.monthValue, '{y}年{m}月')
    }
  },
  methods: {
    selectDate(type) {
      if (this.btnType == 'day') {
        this.$refs.calendarDay.selectDate(type)
      } else if (this.btnType == 'week') {
        this.$refs.calendarWeek.selectDate(type)
      } else {
        this.$refs.calendarMonth.selectDate(type)
      }
    },
    onSearch() {
      if (this.btnType == 'day') {
        this.$refs.calendarDay.onSearch()
      } else if (this.btnType == 'week') {
        this.$refs.calendarWeek.onSearch()
      } else {
        this.$refs.calendarMonth.onSearch()
      }
    },
    selectTable(type) {
      if (type == this.btnType) return
      this.btnType = type
    },
    toDate(val) {
      if (!val) {
        throw new Error('invalid val')
      }
      return val instanceof Date ? val : new Date(val)
    },
    changeNumber(val) {
      this.count = val
    }
  }
}
</script>

<style lang="scss" scoped>
.z-calendar-header {
  .z-calendar__header-top {
    display: flex;
    .el-input {
      width: 200px;
      margin-right: 10px;
    }
  }
  .z-calendar__header-bottom {
    margin-top: 30px;
    display: flex;
    align-items: center;
    padding-left: 146px;
  }
  .z-calendar__button-group {
    margin-right: 30px;
  }
  .z-calendar__button {
    display: flex;
    align-items: center;
    margin-right: 30px;
  }
  .z-calendar__title {
    min-width: 176px;
    margin: 0 20px;
    font-size: 14px;
    font-weight: 400;
    color: $text-color-secondary;
    text-align: center;
  }
  .z-calendar__num {
    margin-left: auto;
    font-size: 14px;
    font-weight: 400;
    color: $text-color-auxiliary;
    span {
      color: $text-color-import;
      font-weight: bold;
    }
  }
}
.z-calendar-body {
  margin-top: 30px;
  height: 100%;
}
</style>
